.page-install {
  .content-section {
    padding-top: 80px;
    text-align: center;

    h6 {
      margin: 30px 0;
    }

    .box {
      height: 70px;
      border: 1px solid rgba(0, 0, 0, 10%);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.12);

      p {
        margin: 0;
        text-align: center;
      }

      .icon {
        vertical-align: middle;
        margin-right: 5px;
      }
    }

    .distributions {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;

      .row {
        margin-bottom: 0;

        @media (min-width: 550px) {
          margin-bottom: 0;

          .columns:nth-of-type(2n - 1) {
            margin-left: 0;
          }
          .columns:nth-of-type(2n) {
            margin-bottom: 20px;
          }
        }

        @media (min-width: 1100px) {
          .columns {
            width: 22%;
          }
          .columns:nth-of-type(2n - 1) {
            margin-left: 20px;
          }
          .columns:nth-of-type(2n) {
            margin-left: 20px;
            margin-bottom: 20px;
          }
        }
      }

      .box {
        height: 100px;
        display: flex;
        flex: 0 0 ~"calc(100% - 25px)";
        margin: 0 10px 20px;

        @media (min-width: 550px) {
          flex: 0 0 ~"calc(50% - 25px)";
        }
        @media (min-width: 1100px) {
          flex: 0 0 ~"calc(25% - 25px)";
        }

        &:hover {
          background-color: #FAFAFA;
        }

        &.soon {
          position: relative;

          &:after {
            content: url('/assets/images/ribbon-soon.svg');
            width: 49px;
            height: 49px;
            position: absolute;
            right: 0;
            top: 0;
          }
        }
      }
    }

    section {
      padding: 80px 0;
    }
  }
}
